<template>
  <div id="radarBox" ref="radarBox" style="width:600px; height:400px;">雷达图 </div>
</template>

<script>
// 完整加载
// 注意:echarts从5开始没有默认导出
// 不允许：import Echarts from 'echarts
import * as Echarts from 'echarts'
import radarData from './radarData'
/**
 1.script的src 引入echarts的js文件
 2.给个容器，给个宽度，给id
 3.通过 let echarts = Echarts.init(挂载的Dom节点)
 4.echarts.setOption(配置)
 */
export default {
  name: 'Radar',
  mounted() {
    // 生命周期最早可以使用$refs的位置是在mounted里面，因为这个时候组件dom才渲染好
    // let echarts = Echarts.init(document.getElementById)
    this.echarts = Echarts.init(this.$refs.radarBox)
    this.echarts.setOption(radarData)
    this.initData()
  },
  methods: {
    initData() {
      setTimeout(() => {
        const value1 = [4200, 3000, 20000, 35000, 50000, 18000]
        const value2 = [5000, 14000, 28000, 26000, 42000, 21000]
        radarData.series[0].data[0].value = value1
        radarData.series[0].data[1].value = value2
        this.echarts.setOption(radarData)
      }, 3000)
    }
  }
}
</script>

<style>

</style>
